<template>
    <div class="login-container">
        <el-form ref="loginRef" :model="loginForm" :rules="rules" class="login-form" label-position="left">
            <h3 class="title">vue3-admin-template</h3>
            <el-form-item prop="username" label="账号" label-width="70px">
                <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号" @keyup.enter="handleLogin"></el-input>
            </el-form-item>
            <el-form-item prop="password" label="密码" label-width="70px">
                <el-input v-model="loginForm.password" :type="passwordType" auto-complete="off" placeholder="密码" @keyup.enter="handleLogin"/>
                <span class="show-pwd" @click="showPwd">
                  <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
                </span>
            </el-form-item>
            <!--<el-form-item prop="code" label="验证码" label-width="70px">-->
                <!--<div class="flex-x-between">-->
                    <!--<el-input v-model="loginForm.code" auto-complete="off" placeholder="请输入验证码" style="width: 60%"  @keyup.enter.native="handleLogin"/>-->
                    <!--<img :src="captchaUrl" @click="getCaptcha" class="login-code-img"/>-->
                <!--</div>-->
            <!--</el-form-item>-->
            <el-form-item style="width:100%;">
                <el-button :loading="loading" type="primary" size="large" style="width: 100%" @click.prevent="handleLogin">
                    <span v-if="!loading">登录</span>
                    <span v-else>登录中...</span>
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup name="login">
import setting from './setting'
import store from '@/stores'
const router = useRouter()
const { proxy } = getCurrentInstance()
import { setToken } from '@/utils/token'
// import userPiniaStore from '@/stores/modules/user'
// const userStore = userPiniaStore()

/** Data */
const loading = ref(false)
const passwordType = ref("password")
const uuid = ref("");
const captchaUrl = ref("")

const data = reactive({
    loginForm:{
        username: "admin",
        password: "123456",
        uuid:'',
        code:'',
    },
    rules: setting.rules
});
const { loginForm, rules } = toRefs(data);

/** 生命周期 */
onMounted(()=>{
    // getCaptcha()
})

/**  Method */
// 获取验证码
// const getCaptcha = async()=> {
//     let _ = proxy
//     const { data: res } = await _.$H.post(_.$A.captcha, {})
//     captchaUrl.value = res.data.image
//     loginForm.value.uuid = res.data.uuid
// }

// 登录
const handleLogin = () => {
    let _ = proxy
    _.$refs.loginRef.validate(async valid => {
        if (!valid) return
        loading.value = true
        //
        if(loginForm.value.username!=='admin' || loginForm.value.password!=='123456') return _.$M.msgError('账号密码错误!')
        setToken('wxb-token')
        store.userStore.setToken('bb-token')
        let userInfo = {
            avatar:'https://img2.baidu.com/it/u=1978192862,2048448374&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500',
            username:'admin',
            roles:['admin'],
            permissions: ['home','components','previewImage','error','401','404'],
        }
        store.userStore.setUserInfo(userInfo)
        router.push({path:'/home'})
        loading.value = false
        //
        // const {data: res} = await _.$H.post(_.$A.login, loginForm.value)
        // console.log('handleLogin',res)
        // if (res.code == 200) {
        //     setToken(res.data.token)
        //     store.userStore.setToken(res.data.token)
        //     loading.value = false
        //     /** 获取菜单*/
        //     router.push({path:'/home'})
        // } else {
        //     loading.value = false
        //     // getCaptcha()
        // }
    })
}

// 显示、隐藏密码
const showPwd = () => {
    if (passwordType.value === 'password') {
        passwordType.value = ''
    } else {
        passwordType.value = 'password'
    }
    this.$nextTick(() => {
        this.$refs.password.focus()
    })
}
</script>

<style lang="less" scoped>
@import "index.less";
</style>
